<!-- 项目堆场 swx-->
<template>
  <div class="projectYard">
    <el-row>
      <el-col :span="24">
        <el-form :inline="true"
                 :model="formInline"
                 class="float-right">
          <el-form-item>
            <el-cascader v-model="formInline.address"
                         :options="addressOptions"
                         change-on-select
                         @change="selectAddress"
                         placeholder="请选择地址"
                         size="medium"></el-cascader>
          </el-form-item>
          <el-form-item>
            <el-input v-model="requestParam.project_name"
                      placeholder="请输入项目名称"
                      @keyup.enter.native="onSearch"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="onSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24">
        <el-table :data="tableData"
                  border
                  :header-cell-style="{background:'#f5f5f5'}">
          <el-table-column label="序号"
                           align="center">
            <template slot-scope="scope">
              <span>{{ scope.$index+(page - 1)*10 + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="项目简称"
                           align="center"
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tooltip class="item"
                          effect="dark"
                          :content="scope.row.project_name"
                          placement="top">
                <span>{{scope.row.nick_name}}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="堆场数量"
                           align="center"
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.point_total }}</span>
            </template>
          </el-table-column>
          <el-table-column label="更新时间"
                           align="center"
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.updated_at }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作"
                           align="center"
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="text"
                         @click="previewYard(scope.row.project_id)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24"
              class="projectYard-bottom">
        <el-pagination @current-change="handleCurrentChange"
                       @size-change="handleSizeChange"
                       :page-size="requestParam.page_size"
                       :current-page='requestParam.page'
                       background
                       layout="total,sizes, prev, pager, next, jumper"
                       :total='pageTotal'>
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { ProjectYardApi } from '@/services/ProjectCenter'
export default {
  data () {
    return {
      formInline: {
        pro_name: '',
        address: ['0'],
        province_id: '',
        city_id: '',
        district_id: ''
      },
      requestParam: {
        project_name: '',
        province_no: '',
        city_no: '',
        area_no: '',
        page: 1,
        page_size: 10,
      },
      addressOptions: [],
      tableData: [],
      pageTotal: 0,
      // uuid: this.$route.query.uuid,
      // userType: this.$route.query.user_type,
      page: 1
    }
  },
  methods: {
    //查询
    onSearch () {
      this.requestParam.page = 1;
      this.getData();
    },
    // 获取数据
    getData () {
      ProjectYardApi.getProjectYardList({
        params: this.requestParam
      }).then(res => {
        this.tableData = res.data.data
        this.pageTotal = res.data.total
      })
    },
    // 地址数据
    getAddressData () {
      fetch(`/static/area.json`, {
        method: 'get',
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        return res.json()
      }).then(res => {
        this.addressOptions = res.data;
        this.addressOptions.unshift({ label: '全部', value: '' })
        console.log(this.addressOptions, 'address')
      })
    },
    // 选择地址
    selectAddress (value) {
      if (value.length == 1) {
        if (value[0] == '0') {
          this.requestParam.province_no = '';
          this.requestParam.city_no = '';
          this.requestParam.area_no = '';
        } else {
          this.requestParam.province_no = value[0];
          this.requestParam.city_no = '';
          this.requestParam.area_no = '';
        }
      } else if (value.length == 2) {
        this.requestParam.province_no = value[0];
        this.requestParam.city_no = value[1];
        this.requestParam.area_no = '';
      } else {
        this.requestParam.province_no = value[0];
        this.requestParam.city_no = value[1];
        this.requestParam.area_no = value[2];
      }
      this.onSearch();
    },
    // 预览
    previewYard (id) {
      this.$router.push({ path: 'yardList', query: { projects: id, } })
    },
    // 分页
    handleCurrentChange (page) {
      this.requestParam.page = page;
      this.getData();
    },
    //一页显示的条数
    handleSizeChange (val) {
      this.requestParam.page_size = val;
      this.getData();
    }
  },
  created () {
    this.getAddressData()
    this.getData()
  }
}
</script>
<style lang="scss" scoped>
.projectYard {
  padding: 20px;
  .projectYard-bottom {
    padding: 40px 0;
    text-align: center;
  }
}
</style>
